<template>
	<view class="login-box">
		<view class="logo animated slideInDown" style="background-image: url('../../static/images/logo.png');"></view>
		<image src="../../static/images/login-bg.png" class="login-image"></image>
		<view class="login-main" style="background-image: url('../../static/images/login-bg.png');">
			<view class="login-main-form">
				<view class="form-field">用戶名</view>
				<view class="form-input">
					<input type="number" v-model="username">
				</view>
				<view class="form-field">密碼</view>
				<view class="form-input">
					<input type="text" :password="true" v-model="password">
				</view>
				<view>
					<view class="login-btn" @click="loginSubmit">登錄</view> 
				</view>
			</view>
		</view>
		<view class="yuan_right animated slideInUp"></view>
		<view class="login-container">
			<view class="login-boxcontainer">
				<view class="left-container">
					<image src="../../static/images/logo2.png" class="logo2"></image>
					
					<view class="input-name-container animated fadeInLeft " v-if="showAccount">
						<view class="input-title">
							ACCOUNT
						</view>
						<view class="input-name">
							<view class="input-n"><input type="number" class="uni-input" maxlength="1" :value="name.name1" readonly="readonly" disabled="true"/></view>
							<view class="input-n"><input type="number" class="uni-input" maxlength="1" :value="name.name2" readonly="readonly" disabled="true"/></view>
							<view class="input-n"><input type="number" class="uni-input" maxlength="1" :value="name.name3" readonly="readonly" disabled="true"/></view>
							<view class="input-n"><input type="number" class="uni-input" maxlength="1" :value="name.name4" readonly="readonly" disabled="true"/></view>
						</view>
						<view class="input-tip">
							請輸入帳號<br>PLEASE ENTER YOUR ACCOUNT
						</view>
					</view>
					
					<view class="input-password-container animated fadeInLeft" v-if="showPass">
						<view class="input-title">
							PASSWORD
						</view>
						<view class="input-password">
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass1" readonly="readonly" disabled="true"/></view>
							<view class="line"></view>
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass2" readonly="readonly" disabled="true"/></view>
							<view class="line"></view>
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass3" readonly="readonly" disabled="true"/></view>
							<view class="line"></view>
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass4" readonly="readonly" disabled="true"/></view>
							<view class="line"></view>
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass5" readonly="readonly" disabled="true"/></view>
							<view class="line"></view>
							<view class="input_pass"><input type="password" class="uni-input" maxlength="1" :value="pass.pass6" readonly="readonly" disabled="true"/></view>
						</view>
						<view class="input-tip">
							請輸入帳號<br>PLEASE ENTER YOUR PASSWORD
						</view>
					</view>
					
				</view>
				<view class="right-container animated slideInRight" >
					<view class="button-items" >
						<button plain="true" value="1"  @click="inputTriger(1)">1</button>
						<button plain="true" value="2"  @click="inputTriger(2)">2</button>
						<button plain="true" value="3"  @click="inputTriger(3)">3</button>
					</view>
					<view class="button-items" >
						<button plain="true" value="4"  @click="inputTriger(4)">4</button>
						<button plain="true" value="5"  @click="inputTriger(5)">5</button>
						<button plain="true" value="6"  @click="inputTriger(6)">6</button>
					</view>
					<view class="button-items" >
						<button plain="true" value="7"  @click="inputTriger(7)">7</button>
						<button plain="true" value="8"  @click="inputTriger(8)">8</button>
						<button plain="true" value="9"  @click="inputTriger(9)">9</button>
					</view>
					<view class="button-items" >
						<button plain="true" style="width: 55%;background-color: #f7ce06;color: white;" value="clear"  @click="inputTriger('clear')">Clear</button>
						<button plain="true" value="0"  @click="inputTriger(0)">0</button>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../static/js/api.js';
	import utils from '../../common/utils.js';
	
	export default {
		data(){
			return {
				username : '',
				password : '',
				showAccount:true,
				showPass:false,
				name:{
					name1:"",
					name2:"",
					name3:"",
					name4:""
				},
				pass:{
					pass1:"",
					pass2:"",
					pass3:"",
					pass4:"",
					pass5:"",
					pass6:"",
				}
			};
		},
		watch:{
			username(val){
				uni.hideToast();
				if(val.toString().length==4){
					this.showAccount=false;
					this.showPass=true;
				}
				if(val.toString().length<4){
					this.showAccount=true;
					this.showPass=false;
				}
				this.name.name1=val.toString()[0];
				this.name.name2=val.toString()[1];
				this.name.name3=val.toString()[2];
				this.name.name4=val.toString()[3];
			},
			password(val){
				if(val.toString().length==0){
					this.showAccount=true;
					this.showPass=false;
				}
				if(val.toString().length==6){
					this.loginSubmit()
				}
				this.pass.pass1=val.toString()[0];
				this.pass.pass2=val.toString()[1];
				this.pass.pass3=val.toString()[2];
				this.pass.pass4=val.toString()[3];
				this.pass.pass5=val.toString()[4];
				this.pass.pass6=val.toString()[5];
			}
		},
		computed:{
			
		},
		methods : {
			loginSubmit(){
				const that=this;
				if(this.username === ''){
					uni.showToast({
						title: '請輸入用戶名',
						icon : 'none',
					});
					return;
				}
				
				if(this.password === ''){
					uni.showToast({
						title: '請輸入用戶密碼',
						icon : 'none',
					});
					return;
				}
				console.log(utils.getUUID());
				api.request('/padsales/UserLogin.ashx', {
					data : {
						DeviceCode: utils.getUUID(),  //設備號
						usernb: this.username,   //用戶名
						password: utils.md5(this.password).toUpperCase(),  //密碼-MD5
					},
					success(data){
						api.setUserInfo(data);
						console.log(data)
						uni.navigateTo({
							url: '../cetering/table',
						});
					},
					fail(data){
						console.log(data)
						that.username='';
						that.password='';
						setTimeout(function(){
							uni.showToast({
								title: '用戶或密碼不正確,请重新输入!',
								icon : 'none',
							});
						},500)
					},
				});
			},
			inputTriger:function(val){
				uni.vibrateLong({
				    success: function () {
				        // console.log('success');
				    }
				});
				if(val!='clear'){
					if(this.username.length<4){
						this.username=this.username+''+val.toString();
					}else{
						if(this.password.length<6){
							this.password=this.password+''+val.toString();
						}
					}
				}else{
					if(this.password.length>0){
						this.password=this.password.toString().substring(0,this.password.toString().length-1)
					}else{
						if(this.username.length>0){
							this.username=this.username.toString().substring(0,this.username.toString().length-1);
						}
					}
				}
				// console.log(this.username+"***"+this.password);
			}
		},
	};
</script>

<style lang="scss">
	.login-box{
		width: 100%;
		height: 100%;
		position: relative;
		font-size: 24upx;
		
		.logo{
			position: fixed;
			right: 20upx;
			top: 20upx;
			background-size: 100% auto;
			background-repeat: no-repeat;
			width: 300upx;
			height: 150upx;
		}
		.login-image{
			height: 100%;
			width: 300upx;
			position: fixed;
			top: 0;left: 0;
			z-index: 99;
		}
		.yuan_right{
			width: 200upx;
			height: 200upx;
			border-radius: 100upx;
			position: fixed;
			right: -40upx;bottom: -40upx;
			background: #edb224;
			z-index: 999;
		}
		
		.login-container{
			width: 85%;
			position: fixed;
			height: calc(100% - 200upx);
			left: 10%;
			background: #f9f9f9;
			top: 150upx;
			box-sizing: border-box;
			.login-boxcontainer{
				width: 100%;
				height: 100%;
				position: relative;
				display: flex;
				flex-direction: row;
				.left-container{
					width: 70%;					
					height: 80%;
					padding: 50upx 100upx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;						
					box-sizing: border-box;
					.logo2{
						width: 150upx;
						height: 80upx;
					}
					.show{
						display: block !important;
					}
					.hide{
						display: none !important;
					}
					.input-name-container{
						width: 60%;
						height: 50upx;
						display: flex;
						flex-direction:column;					
						flex:3;
						.input-title{
							width: 100%;
							line-height: 50upx;
							color: #2C405A;							
							padding-left: 10upx;
							font-size: 17px;
						}
						.input-tip{
							width: 100%;
							font-size: 14px;							
							padding-left: 10upx;
							line-height: 30upx;
							color: #2C405A;
						}
						.input-name{
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: row;
							.input-n{
								flex:1;
								width:50upx;								
								height:50px;
								.uni-input{
									width: 100%;
									height: 100%;
									min-width: 50upx;
									max-width: 50upx;
									min-height: 50upx;
									max-height: 50upx;
									border: none;
									background-color: #3F536E;
									border-radius: 8upx;
									color: white;
									line-height: 50upx;
									text-align: center;
									font-size: 25upx;
								}
							}
							
						}
					}
					.input-password-container{
						width: 80%;
						height: 50upx;
						display: flex;
						flex-direction:column;
						flex:3;
						.input-title{
							width: 100%;
							padding-left: 10upx;
							line-height: 50upx;
							color: #2C405A;
							font-size: 17px;
						}
						.input-tip{
							width: 100%;
							font-size: 14px;
							line-height: 30upx;
							color: #2C405A;							
							padding-left: 10upx;
						}
						.input-password{
							width: 100%;
							height: 100%;
							margin-top: 20upx;
							position: relative;
							display: flex;
							box-sizing: border-box;
							flex-direction: row;
							.line{
								width:40upx;
								height: 4upx;
								background: #3F536E;
								border-left: 2upx solid #fff;
								border-radius: 4upx;
								margin: 0 2upx ;
								margin-top: 28upx;
							}
							.input_pass{
								flex:1;
								width:50upx;								
								z-index: 1;		
								height:50px;
								.uni-input{
									width: 100%;
									height: 100%;							
									min-width: 50upx;
									max-width: 50upx;
									min-height: 50upx;
									max-height: 50upx;
									border: none;
									padding: 0;margin: 0;
									background-color: #fff;
									color: #2C405A;
									border-radius: 50upx;
									border: 3px solid #3F536E;
									line-height: 50upx;
									font-size: 100upx;								
									text-align: center;
								}
							}
							
						}
					}
					
				}
				.right-container{
					width: 30%;
					height: 80%;
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.button-items{
						width: 100%;
						height: 25%;
						display: flex;
						flex-direction: row;
						button{
							width: 70upx;
							height: 70upx;
							color: #6d6e70;
							line-height: 70upx;
							font-size: 30upx;
							font-weight: bold;
							border-radius: 15upx;
							border: 3upx solid #f7ce06;
							background-color: white;
						}
						button:active{
							background-color: #C0C0C0;
						}
					}
				}
			}
		}
		.login-main{
			
			position: absolute;
			width: 70%;
			height: 400upx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			border-radius: 10upx;
			box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: 20% 0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			display: none;
			
			.login-main-form{
				width: 40%;
				margin-right: 50upx;
				display: flex;
				flex-direction: column;
				color: #9d9d9d;
				
				> view{
					padding:15upx 0;
				}
				
				.form-input{
					border-bottom: 1px solid #efefef;
					height: 30upx;
					display: flex;
					align-items: center;
					margin-bottom: 20upx;
					
					input{
						border: none;
					}
				}
				
				.login-btn{
					width: 60%;
					height: 50upx;
					line-height: 50upx;
					background-color: #f6ce55;
					border: 1px solid #f4cb4e;
					color: #fff;
					text-align: center;
					margin: auto;
					border-radius: 5upx;
					
					&:active{
						background-color: #d4b147;
					}
				}
			}
		}
	}
</style>
